<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item label="区域地址" prop="areaName">
          <el-input
            v-model="queryForm.areaName"
            placeholder="用户"
            style="width: 100px;"
            :disabled="true"
          />
        </el-form-item>

        <el-form-item label="客户名称" prop="customerName">
          <el-input v-model="queryForm.customerName" placeholder="客户名称" style="width: 100px;" />
        </el-form-item>

        <el-form-item label="手机号码" prop="customerPhone">
          <el-input v-model="queryForm.customerPhone" placeholder="手机号码" style="width: 100px;" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="closeAll(selectedRow)"
          >批量删除</el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          selection-row
          @selection-change="selectionChange"
          :columns="columns"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="paginationCurrentChange"
        ></d2-crud>
      </template>
    </split-pane>
  </d2-container>
</template>

<script>
import util from "@/libs/util";
import MyAreaTree from "@/components/my-area-tree";

export default {
  name: "query",
  components: { MyAreaTree },

  data() {
    return {
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      queryForm: {
        areaId: "1",
        areaName: "中国",
        customerName: "",
        customerPhone: ""
      },
      columns: [
        {
          title: "客户编号",
          key: "customerSerialnumber",
          sortable: true
        },
        {
          title: "客户名称",
          key: "customerName",
          sortable: true
        },
        {
          title: "手机号码",
          key: "customerPhone",
          sortable: true
        },
        {
          title: "供应商地址",
          key: "areaName",
          sortable: true
        },
        {
          title: "客户状态",
          key: "customerState",
          sortable: true
        },
        {
          title: "阀状态",
          key: "valveState",
          sortable: true,
          component: {
            render: (h, row, node, index) => {
              if (row.valveState === "未知") {
                return <span style="color:red">{row.valveState}</span>;
              } else {
                return <span>{row.valveState}</span>;
              }
            }
          }
        },
        {
          title: "设备类型",
          key: "equipmentType",
          sortable: true
        },
        {
          title: "操作",
          key: "",
          component: {
            render: (h, row, node, index) => {
              return (
                <div>
                  <button
                    class="el-button el-button--default el-button--mini"
                    onclick={() => {
                      this.open(row);
                    }}
                  >
                    开闸
                  </button>
                  <button
                    class="el-button el-button--danger el-button--mini"
                    onclick={() => {
                      this.close(row);
                    }}
                  >
                    关闸
                  </button>
                </div>
              );
            }
          }
        }
      ],
      data: [],
      treeData: [],
      values: [],
      selectParams: {
        size: "mini"
      },
      treeParams: {
        "default-expand-all": true,
        data: [],
        props: {
          children: "children",
          label: "name",
          value: "id"
        }
      },
      selectedRow: []
    };
  },
  mounted() {
    this.handleFormSubmit();
  },
  methods: {
    selectionChange(data) {
      this.selectedRow = data.map(d => d.id);
    },
    //批量关闭
    closeAll(id) {
      this.$confirm("确定批量删除吗?", "批量删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(() => {
        if (!id || !id.length) return;
        const params = id;
        this.$api.admin_remote_multiClose(params).then(res => {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.handleFormSubmit();
        });
      });
    },

    //开闸
    open(row) {
      this.$confirm("确定开闸吗?", "开闸", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(() => {
        this.$api.admin_remote_open({ id: row.id }).then(res => {
          this.$message({
            message: "开闸成功",
            type: "success"
          });
          this.fetchData();
        });
      });
    },
    //关闸
    close(row) {
      this.$confirm("确定关闸吗?", "关闸", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      }).then(() => {
        this.$api.admin_remote_close({ id: row.id }).then(res => {
          this.$message({
            message: "关闸成功",
            type: "success"
          });
          this.fetchData();
        });
      });
    },
    //分页操作
    paginationCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchData();
    },
    onAreaChange(data, node) {
      this.queryForm.areaId = data.id;
      this.queryForm.areaName = data.name;
      this.fetchData();
    },

    fetchData() {
      this.loading = true;
      this.$api
        .admin_remote_getRemotePageVO({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          ...this.queryForm
        })
        .then(res => {
          this.data = res.data;
          this.pagination.total = res.total;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleFormSubmit() {
      this.pagination.currentPage = 1;
      this.fetchData();
    }
  }
};
</script>
